<template>
    <Tippy ref="dropdown" :trigger="trigger" :placement="placement" :offset="offset"
        :interactive="true" :onShow="dropdownShow" :onHide="dropdownHide" :arrow="false" animation="scale" theme="light">
        <div>
            <slot name="title">
                <span class="cursor-pointer">{{ title }}</span>
            </slot>
            <RemixIcon v-if="arrow" class="ml-1 text-gray-700 dark:text-gray-100" :name="hidden ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </div>
        <template #content>
            <slot name="content">
                <div class="min-w-36">
                    <div v-for="item in options" :key="item.value" @click.stop="hideDropdown">
                        <slot name="item" :item="item">
                            <div class="h-8 leading-8 px-2 rounded dark:rounded-none mb-1 hover:bg-neutral-100 cursor-pointer text-gray-700 dark:text-gray-200"
                                @click="onSelect(item)">{{ item.label }}</div>
                        </slot>
                    </div>
                </div>
            </slot>
        </template>
    </Tippy>
</template>
<script setup>
import { ref } from 'vue'
import RemixIcon from './RemixIcon.vue'
import {Tippy} from 'vue-tippy';
const appendToBody = () => (document.body);
const dropdown = ref();
const hidden = ref(true);
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    options: {
        type: Array,
        default: () => []
    },
    placement: {
        type: String,
        default: 'bottom'
    },
    trigger: {
        type: String,
        default: 'click'
    },
    offset: {
        type: Array,
        default: () => [0, 10]
    },
    selectAndHide: {
        type: Boolean,
        default: true
    },
    arrow: {
        type: Boolean,
        default: true
    }
})
const emits = defineEmits(['select'])
const onSelect = (item) => {
    emits('select', item);
    
    // console.log(item)
}
const dropdownShow = () => {
    hidden.value = false;
    return true;
}
const dropdownHide = () => {
    hidden.value = true;
    return true;
}
const hideDropdown = ()=>{
    if (!props.selectAndHide) {
        return true;
    }
    dropdown?.value?.hide();
    hidden.value = true;
}
</script>


<style lang='scss' scoped></style>